<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="../bootstrap/js/jquery-3.1.0.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <link href="http://fonts.googleapis.com/css?family=Lato:300,400,900" rel="stylesheet" type="text/css">
    <style>
        body{
            background-color: #f2f2f2;
            font-family:'Lato', sans-serif;
            font-weight:300;
            font-size:16px;
            color:#555;
        }
        img{
            border: none;
            margin: 0;
            padding: 0;
        }

        hr {
            display: block;
            height: 1px;
            border: 0;
            border-top: 1px solid #ccc;
            margin: 1em 0;
            padding: 0;
        }

        .thumbnail{
            background-color: transparent;
            border: none;
            width: 240px;
            height: auto;
        }

        .producer_ul li{
            padding: 0px 40px;
        }
        .producer_ul img{
            height: 50px;
        }

        .container .row{
            margin-top: 40px;
            margin-bottom: 40px;
        }

        .section-example{
            padding-top: 15px;
            margin-bottom: 15px;
        }

        /*导航条*/
        .navbar-fixed-top{
            top: 7px;
        }
        .navbar-default{
            background-color: #3498db;
            border-color: #3498db;
        }
        .navbar-brand{
            display: inline-block;
            padding: 2px;
        }
        .navbar-left a{
            background-color: transparent;
            color: #fff!important;
            font-size: 16px;
            font-weight: bold;
        }
        .navbar-left li a:hover{
            color: #000!important;
            transition: color .2s;
        }

         /**/
        #headerwrap{
            background-color: #3498db;
            background-image: url(images/airlift-bg.png);
        }

        #headerwrap h1{
            letter-spacing: 1px;
            text-align: center;
        }
        .augment-hover img:hover{
            transform: scale(1.1);//增大1.1倍
            transition:all .2s ease-in-out;//增加动画效果
        }

        #headerwrap form{
            margin: 30px auto;
        }
        #headerwrap form .btn,#headerwrap form input{
            font-size: 18px;
            height: auto;
            border: 3px solid #c02121;
        }
        #headerwrap form .btn{
            background-color: #c02121;
            color: #fff;
        }
        #headerwrap .input-group-btn:last-child > .btn{
            margin-left: 0;
        }

        .section-example3 th{
            vertical-align: top !important;
            text-align: center;
        }
        .section-example3 .icon-title{
            color: #95a5a6;
        }
    </style>
    <script type="text/javascript">
        var RegExObj = {
            //邮箱
            email: function (str) {
                return /^(([0-9a-zA-Z]+)|([0-9a-zA-Z]+[_.0-9a-zA-Z-]*))@([a-zA-Z0-9-]+[.])+([a-zA-Z]{2}|net|com|gov|mil|org|edu|int|name|asia)$/i.test(str);
            }
        };
        $(function(){

            //初始化tooptip
            $('[data-toggle="tooltip"]').tooltip();

            //
            //    Email输入相关
            //

            var $input_email = $("#input_email");                   //Email输入框
            var $email_success_alert = $("#email_success_alert");  //Email验证成功警告框
            //初始化弹出框
            $input_email.popover({
                content: function(elem){
                    var email = $(this).val().trim();
                    var msg = email == "" ? "Email地址不能为空" : "'" + email + "'不是有效的Email地址";
                    return "<div class='clearfix'>" +
                                "<img style='float:left;margin-right:10px;width: 30px;height: auto;' border='0' src='images\\airlift-mascot.png' />" +
                                    "<div style='display:table-cell; *display:inline-block;width: 2000px'>" +
                                        "<p>"+msg+"</p>" +
                                "</div>" +
                            "</div>";
                } ,
                placement:"bottom",
                trigger:"manual",
                html : true
            });

            //点击Get Early Access按钮时验证Email
            function verify_email(e){
                var email = $input_email.val();
                if(!RegExObj.email(email)){
                    $input_email.popover("show");
                    $email_success_alert.addClass("hidden");
                }else{
                    //验证成功
                    $input_email.popover("hide");
                    $email_success_alert.removeClass("hidden");
                }
            }
            //点击Get Early Access按钮时
            $("#getEarlyAccess").click(verify_email);
            //input失去焦点时验证Email
            $input_email.blur(verify_email);
            //input获得焦点时隐藏验证结果框
            $input_email.focus(function(){
                $input_email.popover("hide");
                $email_success_alert.addClass("hidden");
            })
        });
    </script>
</head>
<body style="height: 2000px">
    <!--导航栏-->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#" style="position: absolute;left: 50%;margin-left: -60px"><img src="images/airlift-brand-1.png" class="img-responsive center-block" style="width: auto;height: 100%;"> </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-left">
                    <li><a href="#">How it works<span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#" class="btn btn-default" style="width: 130px;line-height: 36px;padding: 0;border: none;margin: 7px 0px 7px 4px;background-color: #c02121;color: #fff;font-weight: bold;">Get Started</a>
                    </li>
                    <li>
                        <a href="#" class="btn btn-default" style="width: 130px;line-height: 36px;padding: 0;border: none;margin: 7px 0px 7px 4px;background-color: #fff;color: #000;font-weight: bold;">Login</a>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <!--第一部分-->
    <div id="headerwrap" class="section-example">
        <div class="container">
            <div class="center-block bird augment-hover" style="width: 110px; margin: 80px auto 0 auto;">
                <img src="images/airlift-mascot.png" class="img-responsive">
            </div>
            <h1 style="color: white;"><b>Simple ecommerce shipping & fulfillment.</b></h1>
            <!--横排form-->
            <form class="hidden-xs" style="width: 500px">
               <div class="input-group">
                   <input id="input_email" type="text" class="form-control" placeholder="Enter an email address">
                   <span class="input-group-btn">
                     <button id="getEarlyAccess" class="btn btn-default" type="button">Get Early Access <span class="glyphicon glyphicon-menu-right"></span></button>
                   </span>
               </div><!-- /input-group -->
            </form>
            <!--竖排form-->
            <form class="visible-xs" style="width: 280px;">
                <div class="form-group">
                    <input type="text" class="form-control" style="border-bottom-left-radius: 0;border-bottom-right-radius: 0;" placeholder="Enter an email address">
                   <span class="input-group-btn">
                     <button class="btn btn-default" style="width:100%;border-top-left-radius: 0;border-top-right-radius: 0" type="button">Get Early Access <span class="glyphicon glyphicon-menu-right"></span></button>
                   </span>
                </div><!-- /input-group -->
            </form>
            <div id="email_success_alert" class="alert hidden" style="background-color:#2ecc71;width:500px;margin: 0px auto 30px auto;text-align: center" role="alert">
                <h4>Awesome sauce!</h4>
                <p>
                    We just sent you a confirmation email. Mind answering a few questions about your business?
                </p>
                <p>&nbsp;</p>
                <button class="btn btn-default" style="width: 100%;">Let's do it!</button>
            </div>
            <div>
                <img src="images/airlift-hero-dual.png" class="img-responsive center-block">
            </div>
        </div>
    </div>
    <!--第二部分-->
    <div class="section-example">
        <div class="container" style="text-align: center">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <h2>We store & ship your product. You focus on your business.</h2>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail center-block augment-hover">
                        <img src="images/airlift-sale.png" class="" alt="1.jpg">
                        <h3>1. We store your inventory</h3>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail center-block augment-hover">
                        <img src="images/airlift-ship.png" class="" alt="1.jpg">
                        <h3>2. You make a sale</h3>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail center-block augment-hover">
                        <img src="images/airlift-store.png" class="" alt="1.jpg">
                        <h3>3. We package & ship it</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <!--第三部分-->
    <div class="container text-center">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <h2>Sync inventory by integrating existing storefronts.</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <ul class="list-inline producer_ul text-center">
                    <li><img src="images/amazon.png"></li>
                    <li><img src="images/ebay.png"></li>
                    <li><img src="images/etsy.png"></li>
                    <li><img src="images/jet.png"></li>
                    <li><img src="images/shopify.png"></li>
                    <li><img src="images/woocommerce.png"></li>
                </ul>
            </div>
        </div>
    </div>
    <hr>
    <!--第四部分-->
    <div class="section-example3 container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <h2 class="text-center">Simple pricing that scales as you grow.</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <table class="table table-bordered table-hover text-center" style="table-layout:fixed">
                <tbody>
                    <tr>
                        <th width="300px">Orders per month</th>
                        <th>
                            <img src="images/lite.png" style="max-width: 160px;width: 100%;">
                            <h3 class="icon-title"><b>Lite</b></h3>
                            Up to 500
                        </th>
                        <th>
                            <img src="images/small.png" style="max-width: 160px;width: 100%;">
                            <h3 class="icon-title"><b>Small</b></h3>
                            Up to 1,000
                        </th>
                        <th>
                            <img src="images/medium.png" style="max-width: 160px;width: 100%;">
                            <h3 class="icon-title"><b>Medium</b></h3>
                            Up to 5,000
                        </th>
                        <th>
                            <img src="images/large.png" style="max-width: 160px;width: 100%;">
                            <h3 class="icon-title"><b>Large</b></h3>
                            Up to 50,000
                        </th>
                    </tr>
                    <tr>
                        <td>
                            Packing fees
                            <span class="badge pull-right" data-toggle="tooltip" data-placement="right" title="Tooltip on left">?</span>
                        </td>
                        <td>$3</td>
                        <td>$2.75</td>
                        <td>$2.50</td>
                        <td>$1.90</td>
                    </tr>
                    <tr>
                        <td>
                            Pick additional items
                            <span class="badge pull-right" data-toggle="tooltip" data-placement="right" title="Tooltip on left">?</span>
                        </td>
                        <td>$0.75</td>
                        <td>$0.65</td>
                        <td>$0.55</td>
                        <td>$0.35</td>
                    </tr>
                    <tr>
                        <td>Storage fees</td>
                        <td colspan="4">$0.50 per cubic foot per month. Monthly minumum $25</td>
                    </tr>
                    <tr>
                        <td>Receiving items</td>
                        <td colspan="4">Always free</td>
                    </tr>
                </tbody>
            </table>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <h3 class="text-center">Additional Services</h3>
                <table class="table table-bordered table-hover text-center" style="table-layout:fixed">
                    <tbody>
                        <tr>
                            <td width="300px">
                                Track serial numbers
                                <span class="badge pull-right" data-toggle="tooltip" data-placement="right" title="Tooltip on left">?</span>
                            </td>
                            <td>$0.60</td>
                            <td>$0.50</td>
                            <td>$0.40</td>
                            <td>$0.30</td>
                        </tr>
                        <tr>
                            <td>Product barcoding

                            <td colspan="4">$0.10 per item</td>
                        </tr>
                        <tr>
                            <td>Returns</td>
                            <td colspan="4">Same rate as outbound orders</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <hr>
    <!--第五部分-->
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <h3 class="text-center">We partner with carriers you trust for discounted rates.</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <ul class="list-inline text-center">
                    <li><image src="images/ups.png" style="width:100px;"></image> </li>
                    <li><image src="images/usps.png" style="width:100px;"></image> </li>
                    <li><image src="images/fedex.png" style="width:100px;"></image> </li>
                    <li><image src="images/dhl.png" style="width:100px;"></image> </li>
                </ul>
            </div>
        </div>
    </div>

    <hr>
    <!--第六部分-->
    <div class="container">
        <div class="col-lg-6">
            <h2 style="font-size:30px;font-weight: 300">Simple ecommerce shipping & fulfillment.</h2>
            <span>We store & ship your product. You focus on your business</span>
        </div>
        <div class="pull-right">
            <br>
            <a class="btn btn-danger btn-lg" style="width: 200px;height: 50px;line-height: 36px">Get Started</a>
            <a class="btn btn-primary btn-lg" style="width: 200px;height: 50px;line-height: 36px">Schedule a Demo</a>
        </div>
    </div>
    <hr>
    <div class="container">
        <div class="visible-xs">
            <div class="text-center">
                <a><img src="images/airlift-brand-2.png" style="height: 34px;width: auto;margin: 8px 0px;"></a>
            </div>
            <ul class="list-inline text-center">
                <li><a>Support</a></li>
                <li><a>Blog</a></li>
                <li><a>Terms</a></li>
                <li><a>Privacy</a></li>
                <li><a>About</a></li>
                <li><a>Support</a></li><br>
                <li><a><img src="images/mwsa-gray.png"></a></li>
            </ul>
        </div>
        <div class="hidden-xs">
            <div class="col-xs-3 col-sm-2">
                <a><img src="images/airlift-brand-2.png" style="height: 34px;width: auto;margin: 8px 0px;"></a>
            </div>
            <ul class="list-inline pull-right">
                <li><a>Support</a></li>
                <li><a>Blog</a></li>
                <li><a>Terms</a></li>
                <li><a>Privacy</a></li>
                <li><a>About</a></li>
                <li><a>Support</a></li>
                <li><a><img src="images/mwsa-gray.png"></a></li>
            </ul>
        </div>
    </div>
</body>
</html>